<template>
    <div class="all_user_info">
        <div class="head">
            <div class="shaixuan">
                <div class="username">
                    <div>用户名</div>
                    <div><el-input v-model="chaxun.username" placeholder="用户名" /></div>
                </div>
                <div class="nickname">
                    <div>用户昵称</div>
                    <div><el-input v-model="chaxun.nickname" placeholder="用户昵称" /></div>
                </div>
                <div class="useractive">
                    <div>用户状态</div>
                    <el-select v-model="chaxun.is_act" placeholder="Select" style="width: 115px">
                        <el-option label="所有" value="" />
                        <el-option label="已激活" value="true" />
                        <el-option label="未激活" value="false" />
                    </el-select>
                </div>
                <div class="anniu">
                    <el-button type="primary" @click="user_list">查询</el-button>
                </div>
            </div>
            <div class="xia">
                <div class="left">
                    <h1>用户列表</h1>
                </div>
                <div class="right">
                    <div class="add">
                        <el-button type="primary" @click="add_new_user">新增用户</el-button>
                    </div>
                    <div class="delete_some_user" @click="all_delete">
                        <el-button type="danger">批量删除</el-button>
                    </div>
                    <div class="stop_some_user">
                        <el-button type="warning">批量停用</el-button>
                    </div>   
                </div>
            </div>
        </div>
        <div class="black"></div>
        <div class="user_table">
            <el-table class="own_table"
            ref="multipleTableRef"
            :data="users_info_params" 
            stripe style="width: 100%" 
            @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"/>
                <el-table-column label="头像" width="100">
                    <template #default="scope">
                        <el-avatar :size="40" :src="scope.row.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名"/>
                <el-table-column prop="nick_name" label="用户昵称" />
                <el-table-column prop="gender" label="性别">
                    <template #default="scope">
                        <el-button v-if="scope.row.gender == '1'" type="success" plain>男</el-button>
                        <el-button v-else type="warning" plain>女</el-button>
                    </template>
                </el-table-column>    
                <el-table-column prop="role" label="角色名称">
                    <template #default="scoped">
                        <el-tag size="small" type="success" v-for="item in scoped.row.roles_name">{{ item }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="is_active" label="状态">
                    <template #default="scoped">
                        <el-button v-if="scoped.row.is_active == true" type="success" round>已激活</el-button>
                        <el-button v-else type="danger" round>未激活</el-button>
                    </template>
                </el-table-column>
                <el-table-column width="300px" label="操作">
                    <template #default="scope">
                        <el-button link type="primary" @click="select_fenpeijuese(scope.row)">分配角色</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button link type="primary" @click="">重置密码</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button link type="primary" @click="set_user_info(scope.row)">编辑</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-popconfirm title="你确定删除吗?" @confirm="deleteHandle(scope.row.id)"
                            confirm-button-text="确定" cancel-button-text="取消">
                            <template #reference>
                                <el-button link type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="fenye">
            <el-pagination
                v-model:current-page="chaxun.page"
                v-model:page-size="chaxun.page_size"
                :page-sizes="[5, 8, 10]"
                :small="true"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="list_total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <div class="bianji_chouti">
            <el-drawer
                class="chouti"
                v-model="drawer"
                title="编辑用户信息"
                :direction="direction"
                size="40%">
                <span>
                    <div class="set_some_userinfo">
                        <div class="line_box" style="width: 100%; height: 1px; background: black;"></div>
                        <div class="xinxi">用户名: </div>
                        <el-input v-model="user_list_store.user_list_info.username" placeholder="请输入新的用户名" />
                        <div class="xinxi">昵称: </div>
                        <el-input v-model="user_list_store.user_list_info.nick_name" placeholder="请输入新的用户昵称" />
                        <div class="xinxi">性别: </div>
                            <div>
                                <el-radio-group v-model="user_sex" size="large">
                                <el-radio-button label="男" />
                                <el-radio-button label="女" />
                                </el-radio-group>
                            </div>
                        <div class="xinxi">请选择你的角色(单选/多选): </div>
                        <div class="user_roles">
                            <el-checkbox-group v-model="user_list_store.user_list_info.role" size="large">
                                <el-checkbox-button v-for="role in roles" :key="role" :label="role">
                                    {{ role }}
                                </el-checkbox-button>
                            </el-checkbox-group>
                        </div>
                        <div class="xinxi">邮箱: </div>
                        <el-input v-model="user_list_store.user_list_info.email" placeholder="请输入新的邮箱" />
                        <div class="xinxi">手机号: </div>
                        <el-input v-model="user_list_store.user_list_info.phone" placeholder="请输入新的手机号" />
                        <div class="xinxi">用户状态: </div>
                            <div>
                                <el-radio-group v-model="active_type" size="large">
                                <el-radio-button label="已激活" />
                                <el-radio-button label="未激活" />
                                </el-radio-group>
                            </div>
                        <div class="line_box" style="width: 100%; height: 1px; background: black;"></div>    
                        <div class="anniu">
                            <el-button type="info" plain>取消</el-button>
                            <el-button type="success">确定修改</el-button>
                        </div>
                    </div>
                </span>
            </el-drawer>
        </div>
    </div>
    <div class="add_User">
        <el-dialog
        v-model="add_user_card"
        title="新增用户"
        width="40%"
        :before-close="add_user_card_handleClose">
        <template #default>
            <div class="card_neirong">
                <div class="shurukuang">
                    <el-input v-model="add_user_params.username" placeholder="请输入用户名" />
                </div>
                <div class="xuanze1">
                    <el-radio-group v-model="add_user_params.gender">
                        <el-radio label="1" size="large" border>男</el-radio>
                        <el-radio label="2" size="large" border>女</el-radio>
                    </el-radio-group>
                </div>
                <div class="shurukuang">
                    <el-input v-model="add_user_params.phone" placeholder="请输入电话" />
                </div>
                <div class="shurukuang">
                    <el-input v-model="add_user_params.nick_name" placeholder="请输入昵称" />
                </div>
                <div class="shurukuang">
                    <el-input v-model="add_user_params.email" placeholder="请输入邮箱" />
                </div>
                <div class="duoxuankuang">
                    <el-select
                        v-model="add_user_params.job"
                        multiple
                        placeholder="请选择岗位"
                        style="width: 240px">
                        <el-option
                            v-for="item in job_list"
                            :key="item.name"
                            :label="item.name"
                            :value="item.id"/>
                        </el-select>
                </div>
                <div class="user_add_dept">
                    <el-tree-select
                        v-model="add_user_params.dept_id"
                        :data="select_dept_data"
                        check-strictly
                        :render-after-expand="false"
                        style="width: 240px"/>
                </div>
                <div class="user_add_role">
                        <el-select
                        v-model="add_user_params.roles"
                        multiple
                        placeholder="请选择角色"
                        style="width: 240px">
                        <el-option
                            v-for="item in user_add_job_options"
                            :key="item.name"
                            :label="item.name"
                            :value="item.id"/>
                        </el-select>
                </div>
                <div class="add_user_active">
                    <el-radio-group v-model="add_user_params.is_active">
                        <el-radio label="true" size="large" border>激活</el-radio>
                        <el-radio label="false" size="large" border>禁用</el-radio>
                    </el-radio-group>
                </div>
                <div class="add_anniu">
                    <el-button @click="cancel_add_user" >取消</el-button>
                    <el-button type="primary" @click="add_new_one_user">确认</el-button>
                </div>
            </div>
        </template>
        </el-dialog>
    </div>
    <div class="all_juese">
        <el-dialog
            v-model="juese_select"
            title="选择角色"
            width="40%"
            :before-close="add_user_card_handleClose">
                <template #default>
                    <el-tree
                    :data="select_role_list"
                    show-checkbox
                    node-key="id"
                    :props="{label: 'name'}"
                    :default-expand-all="true"
                    check-strictly
                    ref="select_role_Ref"/>

                    <div class="xuanze_anniu">
                        <el-button @click="select_role_cancel">取消</el-button>
                        <el-button type="primary" @click="select_role_ok">确定</el-button>
                    </div>
                </template>
        </el-dialog>
    </div>
</template>

<script setup name="user_manager">
import {ref,watch} from 'vue'
import {User_List, Delete_User,add_user, get_one_user, put_one_user} from '@/apis/user'
import {all_list_job} from '@/apis/job'
import {get_role_list} from '@/apis/role'
import {tree_dept} from '@/apis/department'
import {Set_User_List_Store} from '@/stores/index.js'

//表格选中的行的列表
const del_list = ref([]) 
const filter_status = ref('所有') 
const user_active_status = ref('已激活')
const user_list_store = Set_User_List_Store()
const drawer = ref()
const user_sex = ref('男')
const active_type = ref('已激活')
const direction  = ref('rtl')
const multipleTableRef = ref()
const users_info_params = ref([])
const user_roles_checkbox = ref(['超级管理员'])
const roles = ['超级管理员', '管理员', '运维', '开发']
const chaxun = ref({
    page: 1,
    page_size: 8,
    username: '',
    nickname: '',
    is_act: ''
})
// ******选择角色******
const now_id = ref(0)
const select_role_Ref = ref(null)
const juese_select = ref(false)
const select_role_list = ref([])
const select_fenpeijuese = async(row) => {
    juese_select.value = true
    let new_role_list = await get_role_list()
    console.log("角色列表:::",new_role_list.results)
    select_role_list.value = new_role_list.results
    console.log("row:::",row)
    let one_user = await get_one_user(row.id)
    console.log("one_user_result",one_user.result)
    let one_user_roles = one_user.result.roles
    select_role_Ref.value.setCheckedKeys(one_user_roles)
    add_user_params.value.username = one_user.result.username
    add_user_params.value.nick_name = one_user.result.nick_name
    add_user_params.value.gender = one_user.result.gender
    add_user_params.value.email = one_user.result.email
    add_user_params.value.phone = one_user.result.phone
    add_user_params.value.is_active = one_user.result.is_active
    add_user_params.value.dept_id = one_user.result.dept_id
    add_user_params.value.job = one_user.result.job
    now_id.value = one_user.result.id
}
const select_role_cancel = () => {
    juese_select.value = false
}
const select_role_ok = async() => {
    let role = select_role_Ref.value.getCheckedKeys()
    add_user_params.value['roles'] = role
    let res = await put_one_user(now_id.value, add_user_params.value)
    user_list()
    juese_select.value = false
}

// ******选择角色******

// ******新增用户******
const add_user_card = ref(false)
const add_user_card_sex = ref('男')
const user_select_job = ref()
const select_dept = ref()
const job_list = ref([])
const select_dept_data = ref([])
const user_add_job_options = ref([])
const add_new_user = async() => {
    add_user_card.value = true
    let res = await all_list_job()
    job_list.value = res.result
    console.log("工作列表:::", res.result)

    let dept_list = await tree_dept()
    console.log('部门列表:::', dept_list.result)
    select_dept_data.value = dept_list.result

    let role_list = await get_role_list()
    console.log("角色列表:::",role_list.results)
    user_add_job_options.value = role_list.results
    console.log("")

}
const cancel_add_user = () => {
    add_user_card.value = false
}
const add_user_card_handleClose = (done) => {
    done()
}

let add_user_params = ref({
    username:'',
    nick_name:'',
    gender:'',
    email:'',
    phone:'',
    is_active:'',
    roles:[],
    dept_id:0,
    job:[]
}) 

const add_new_one_user = async() => {
    if(add_user_params.value.is_active == "true"){
        add_user_params.value.is_active = true
    }else{
        add_user_params.value.is_active = false
    }
    console.log("要发送的数据:::", add_user_params.value)
    let res = await add_user(add_user_params.value)
    user_list()
    add_user_card.value = false
}
// ******新增用户******


// 分页
// const currentPage = ref(1)
// const pageSize = ref(5)
const list_total = ref(1)
const handleSizeChange = (val) => {
    console.log("handleSizeChange事件触发了",val)
    chaxun.value.page_size = val
    user_list()
}
const handleCurrentChange = (val) => {
    console.log("handleCurrentChange事件触发了接收到的是",val)
    chaxun.value.page = val
    user_list()
}
// 分页


const handleSelectionChange = (val) => {
  del_list.value = val.map(item => item.id)
}

const all_delete = async() => {
    await Delete_User(del_list.value)
    user_list()
}
const deleteHandle = async(params_data) => {
    del_list.value.push(params_data)
    await Delete_User(del_list.value)
    user_list()
}

const set_user_info = (params) => {
    drawer.value = true
    user_list_store.set_user_list_info(params.id,
        params.avatar,params.email,params.gender,params.is_active,
        params.nick_name,params.phone,params.role,params.username
    )
    if(user_list_store.user_list_info.gender == "1"){
        user_sex.value = '男'
    } else{
        user_sex.value = '女'
    }
    if(user_list_store.user_list_info.is_active == true){
        active_type.value = '已激活'
    } else{
        active_type.value = '未激活'
    }
}

const user_list = async() => {
    console.log("查询前参数::: ", chaxun.value)
    try{
        let list = await User_List(chaxun.value.page, chaxun.value.page_size,
        chaxun.value.username, chaxun.value.nickname, chaxun.value.is_act)
        console.log("查询结果::: ",list) 
        users_info_params.value = list.results
        list_total.value = list.total
        list_total.value = list.total || 0
    }catch{
        console.error('获取用户列表失败:', error)
        ElMessage.error('加载用户列表失败')
        users_info_params.value = []
        list_total.value = 0
    }
}
user_list()
</script>

<style lang="scss" scoped>
.all_user_info{
    height: 100%;
    .head{
        .shaixuan{
            padding-left: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 15px;
            .username{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
            }
            .nickname{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
            }
            .useractive{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
            }
            // .anniu{
            // }
        }
        .xia{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                margin-left: 15px;
                font-size: large;
                margin-top: 20px;
            }
            .right{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                padding-right: 10px;
            }
        }
       
    }
    .black{
        min-height: 1px;
        height: 1px;
        background: black;
        margin-bottom: 10px;
    }
    .user_table{
        height: 100%;
        width: 100%;
        .own_table{
            min-height: 500px;
        }
    }
    .fenye{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 5px;
    }
    .bianji_chouti{
        width: 100%;
        .chouti{
            width: 400px;
            .set_some_userinfo{
                display: flex;
                align-items: stretch;
                flex-direction: column;
                gap: 10px;
                .anniu{
                    width: 100%;
                    margin-top: 15px;
                    margin-left: 130px;
                }
            }
        }
    }
    .bianji_chouti :deep(.xinxi){
    text-align: left !important;
    }

    :deep(.set_some_userinfo.el-input) {
        width: 70%; // 你可以改成 80%、250px、400px 等
    }
}
.add_User{
    .card_neirong{
            display: flex;
            flex-direction: column;
            gap: 10px;
        // .shurukuang{

        // }
        // .xuanze1{
        // }
        // .shurukuang{

        // }
        // .shurukuang{

        // }
        // .shurukuang{

        // }
        // .duoxuankuang{

        // }
        // .user_add_dept{

        // }
        // .user_add_role{

        // }
        // .add_user_active{

        // }
        // .add_anniu{

        // }
    }
}    
</style>